<template>
	<b-layout-index>


		<view class="color " :style="{ '--colorPrimary': color.primary }">
			<navbar :isStyle="light" :title="title"></navbar>
			<view class="mg-top-30">
				<view class="mg-10 pd-10 br-rd-10 bg-white">
					<u-cell-group :border="false" :title="$t('总金额')" :customStyle="{'font-size':'12px'}">
						<u-cell isLink url="datelist" :border="false">
							<view slot="title">
								<view class="mg-bottom-10">
									<u--text :color="color.primary" :bold="true" align="center" size="24" mode="price"
										:text="(info.priceAll+info.price)"></u--text>
								</view>
							</view>
							<view slot="label">
								<u-grid :border="false" col="2">
									<u-grid-item>
										<u--text :color="color.primary" :bold="true" align="center" size="18"
											mode="price" :text="(info.price)"></u--text>
										<text class="grid-text font-size-12">{{$t("自己业绩")}}</text>
									</u-grid-item>
									<u-grid-item>
										<u--text :color="color.primary" :bold="true" align="center" size="18"
											mode="price" :text="(info.priceAll)"></u--text>
										<text class="grid-text font-size-12">{{$t("团队业绩")}}</text>
									</u-grid-item>
								</u-grid>
							</view>
						</u-cell>
					</u-cell-group>


				</view>
			</view>
		</view>
		<view class="mg-top-40 bg-white">

			<u-cell-group :title="$t('业绩统计')" class="" :border="false">
				<u-cell v-for="(item,index) in datalist">
					<view slot="title">
						<u--text size="12" :bold="true" :text="item.name"></u--text>
					</view>
					<view slot="label">
						<u-grid :border="false" col="2">
							<u-grid-item>
								<u--text :color="color.primary" :bold="true" align="center" size="18" mode="price"
									:text="(item.halfYear)"></u--text>
								<text class="grid-text font-size-12">{{$t("半年合计")}}</text>
							</u-grid-item>
							<u-grid-item>
								<u--text :color="color.primary" :bold="true" align="center" size="18" mode="price"
									:text="(item.fullYear)"></u--text>
								<text class="grid-text font-size-12">{{$t("一年合计")}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</u-cell>

			</u-cell-group>
		</view>


	</b-layout-index>
</template>

<script>
	import {
		getFindByAgentPerList
	} from "../../../../../api/agent"
	import {
		findByIncomeAndExpenses,
		findByMyList,
		findByPerUserWallet
	} from "@/api/userWallet.js"
	export default {

		data() {
			return {
				show: false,
				value1: Number(new Date()),
				info: {
					count: 0,
					price: 0,
					priceAll: 0
				},
				datalist: [],
				userId:0,
				title:this.$t('业绩统计')

			}
		},
		onLoad: function(options) {
				this.userId = options.userId || 0;
				if(this.userId>0){
	
				this.title= options.name || this.$t('业绩统计')	
				}else{
					this.title=this.$t('业绩统计')
				}
			this.getInfo()

		},


		methods: {
			getInfo: function() {
				//findByPerUserWallet
				findByPerUserWallet(this.userId).then(res => {
					this.info = res
					this.getFindByList(this.userId)

				})

			},
			getFindByList: function() {
				//getFindByAgentPerList
				getFindByAgentPerList(this.userId).then(res => {
					this.datalist = res
				})
			}

		}
	}
</script>

<style lang="scss">
	.w100 {
		width: 110px;
	}

	.btn {
		background-color: var(--color-primary);
		text-align: center;
		color: #fff;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.grid {
		box-shadow: 0 0 4px 1px #eee;
		text-align: center;
	}

	.grid1 {
		background-color: var(--color-primary);
		color: #fff;
	}

	.grid2 {
		background-color: $u-warning;
		color: #fff;
	}

	.primarycolor {
		color: var(--color-primary);
	}

	.priceColor {
		color: var(--color-primary);
		font-weight: bold;
		font-size: 24px;
	}

	.color {
		background-image: linear-gradient(to bottom, var(--color-primary), var(--color-primary), #ffffff, #eeeeee);
	}

	.m {
		margin-top: 100px;
	}

	.bgbbw {
		background-color: #ffffffa6;
	}

	.icon {
		width: 40px;
		height: 40px;
		background-color: #EEEEEE;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 100%;
	}
</style>